<template>
    <div class="container">
        <Category title="美食">
            <img
                src="http://hhhhly.com/Content/UploadFiles/202003051417081.jpg"
                alt=""
            />
        </Category>
        <Category title="游戏">
            <ul>
                <li v-for="(g, index) in games" :key="index">
                    {{ g }}
                </li>
            </ul>
        </Category>
        <Category title="电影">
            <video
                controls
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/90cf7fc1d870df0ad73c5af13f6772ea.mp4"
            ></video>
        </Category>
    </div>
</template>

<script>
import Category from "./components/Category.vue";
export default {
    name: "App",
    components: { Category },
    data() {
        return {
            foods: ["火锅", "烧烤", "小龙虾", "牛排"],
            games: ["彩虹六号", "守望先锋", "原神", "APEX"],
            films: ["《教父》", "《拆弹专家》", "《过渡人》", "《十二生肖》"],
        };
    },
};
</script>

<style lang="css">
.container {
    display: flex;
    justify-content: space-around;
}
img {
    width: 100%;
}
video {
    width: 100%;
}
</style>